<template name="classEnter">
	<view class="classEnter">
		<block v-if="classList.length>10">
			<swiperDot :current="current" :dotsOption="dotsStyles" :list="newClassList">
				<swiper :autoplay="false" :style="{height:swiperHeight+'px'}" @change="slideSwip">
					<swiper-item v-for="(itm,idx) in newClassList" :key="idx">
						<view class="classEnterBox">
							<view class="enterBox" v-for="(item,index) in newClassList[idx]" :key="index" :data-id="item.categoryId" :data-cname="item.name" :data-url="item.innerUrl?item.innerUrl:''" @tap="classEnterJump">
								<image :src="item.img" :style="{height:iconHeight+'px',width:iconHeight+'px'}"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</swiperDot>
		</block>
		<block v-else>
			<view class="classEnterBox">
				<view class="enterBox" v-for="(item,index) in classList" :key="index" data-url="allClass" :data-id="item.categoryId"
				:data-cname="item.name" @tap="classEnterJump">
					<image :src="item.img" :style="{height:iconHeight+'px',width:iconHeight+'px'}"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</block>
	</view>


</template>


<script>
	import swiperDot from "@/components/swiperDot/swiperDot.vue";
	import Request from "@/sdk/pocky-request/index.js";
	import COMM from "@/common/common.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'classEnter', //组件名称
		components: {
			swiperDot
		},
		props:{
			hasFresh:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				selectCity: state => state.map.selectCity
			})
		},
		// 组件参数
		data() {
			return {
				current: 0,
				dotsStyles: {
					globalStyle: {
						side: 'inSide',
						bottom: 4,
						space: 6
					},
					normalStyles: {
						width: 10,
						height: 4,
						borderRadius: 2,
						backgroundColor: '#c5c3c6',
						border: 'none',
						color: ''
					},
					activeStyle: {
						width: 20,
						height: 4,
						borderRadius: 2,
						backgroundColor: '#ff6902',
						border: 'none',
						color: ''
					}
				},
				classList: [{
					"id": 15,
					"categoryId": -100,
					"areaId": 110101,
					"name": "0元购",
					"img": ""
				}, {
					"id": 1,
					"categoryId": 1,
					"areaId": 320116,
					"name": "学习辅导",
					"img": ""
				}, {
					"id": 2,
					"categoryId": 22,
					"areaId": 320116,
					"name": "幼儿早教",
					"img": ""
				}, {
					"id": 3,
					"categoryId": 23,
					"areaId": 320116,
					"name": "语言培训",
					"img": ""
				}, {
					"id": 4,
					"categoryId": 24,
					"areaId": 320116,
					"name": "艺术综合",
					"img": ""
				}, {
					"id": 5,
					"categoryId": 25,
					"areaId": 320102,
					"name": "体能健身",
					"img": ""
				}, {
					"id": 6,
					"categoryId": 26,
					"areaId": 320116,
					"name": "电脑与IT",
					"img": ""
				}, {
					"id": 7,
					"categoryId": 27,
					"areaId": 320116,
					"name": "职业技能",
					"img": ""
				}, {
					"id": 9,
					"categoryId": 29,
					"areaId": 320116,
					"name": "学历文凭",
					"img": ""
				}, {
					"id": 8,
					"categoryId": 28,
					"areaId": 320116,
					"name": "资格考试",
					"img": ""
				}],
				newClassList: [],
				swiperHeight: this.getHeight(),
				iconHeight: this.getIconHeight()
			}
		},
		// 组件方法
		methods: {
			// 数据分组，超过10个显示swiper
			chunkArrayInGroups(arr, size) {
				// Break it up.
				var length = arr.length;
				var newArr = [];
				var i = Math.ceil(length / size * 1.0);
				var j = 0;
				while (j < i) {
					var spare = length - j * size >= size ? size : length - j * size;
					var temp = arr.slice(j * size, j * size + spare);
					newArr.push(temp);
					j++;
				}
				return newArr;
			},
			// 获取整体高度
			getHeight() {
				return parseInt(((uni.getSystemInfoSync().screenWidth - uni.upx2px(56)) / 5 * 0.7 + uni.upx2px(38)) * 2 + uni.upx2px(
					40))
			},
			// 获取单个图标高度
			getIconHeight() {
				return parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(56)) / 5 * 0.7)
			},
			slideSwip: function(e) {
				this.current = e.detail.current
			},
			classEnterJump(e) {
				let _id = parseInt(e.currentTarget.dataset.id);
				
				if(e.currentTarget.dataset.url){	//有链接字段
					if(e.currentTarget.dataset.url.indexOf('?')>-1){
						let _data=COMM.strToObj(e.currentTarget.dataset.url.split('?')[1])
						_data.url=e.currentTarget.dataset.url.split('?')[0]
						this.toPage(_data);
					}else{
						this.toPage(e.currentTarget.dataset.url);
					}
					
				}else{
					if (_id > 0) {
						this.toPage({
							type: 0,
							url: 'goodList',
							firCate: _id,
							cname: e.currentTarget.dataset.cname
						})
					
					} else {
						if (_id == -100) {
							this.toPage({
								url: 'zeroList'
							})
						}
					
					}
				}
				
				
			},
			getData() {
				let areaId = this.selectCity.cityCode;


				Request().request({
					url: '/mall/category/recom.do',
					method: 'post',
					data: {
						// "channel": 0,
						"areaId": areaId
					}
				}).then(res => {
					if (res.data.result == 1) {
						this.classList = res.data.data
						this.classList.push({
							"id": 0,
							"categoryId": 0,
							"areaId": 3201,
							"name": "全部",
							"img": "../../static/all.png",
							"innerUrl":"allClass"
						})
					} else {

					}
				})
			}


		},
		watch: {
			classList(newVale) {
				if (this.classList.length > 10) {
					this.newClassList = this.chunkArrayInGroups(this.classList, 10)
				}
			},
			selectCity(newVal) {
				this.getData();
			},
			hasFresh(newVal){
				if(!newVal){
					this.getData()
				}
			}
		},
		created() {

			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select('.classEnter').boundingClientRect(data => {
					getApp().globalData.G_CLASSENTER = data
				}).exec();
				this.getData()
			}, 100)
		}
	}
</script>

<style lang="less">

	.classEnterBox {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;
		justify-content: flex-start;

		.enterBox {
			width: 20%;
			flex-grow: 0;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// margin-bottom: 24rpx;

			image {}

			text {
				display: block;
				height: 48upx;
				font-size: 28upx;
				color: #3b434d;
				margin-top: -10upx;
			}
		}
	}
</style>
